<template>
  <div class="diseaseDialog">
    <el-dialog
      title="疾病选择"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      @close="$emit('selectDisease', false)"
      top="30vh"
    >
      <div class="content">
          <el-row type="flex"
            justify="space-between"
            v-for="(item, index) in dataList"
            :key="index">
            <el-col :span="4" 
                v-for="(key, i) in item"
                :key="i">
              <div 
                class="name" 
                :class="{'empty': !key.code, 'isactive': key.code === isActive.code}"
                @click="selectDisease(key)">
                    {{key.name}}
               </div>
            </el-col>
          </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">取 消</el-button>
        <el-button type="primary" @click="change" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
      dataList: [],
      isActive: {
          code: "",
          name: ""
      }
    };
  },
  props: {
    dialogVisbile: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    disease: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
  },
  watch: {
    dialogVisbile(val) {
        if(val) {
            this.isShow = val;
            this.isActive = this.disease;
        }
    },
    data: {
      handler(val) {
        this.isActive = val[0];
        let result = [];
        let length = Math.ceil(val.length / 5);
        for (let i = 0; i < length; i++) {
          result.push(val.slice(i * 5, (i + 1) * 5));
        }

        let add = 5 - (val.length % 5);
        if(add != 0) {
            Array(add).fill({code: "", name: ""});
            result[result.length - 1] = [
                    ...result[result.length - 1], 
                    ...Array(add).fill({code: "", name: ""})]
        }
        this.dataList = result;
      },
      deep: true
    }
  },
  methods: {
      selectDisease(key) {
          this.isActive = key;
          console.log(key);
      },
      change() {
         this.isShow = false;
         this.$emit('selectDisease', this.isActive);
      },
      close() {
          this.isShow = false;
          this.$emit('selectDisease', false);
      }
  }
};
</script>
<style lang="less" scoped>
// @import url('@/assets/common/global_deep_style.less');
.diseaseDialog {
  /deep/.el-dialog__header {
    height: 48px;
    padding: 16px;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      letter-spacing: 0;
      line-height: 16px;
      vertical-align: middle;
      &::before {
        display: inline-block;
        width: 4px;
        height: 16px;
        margin-right: 5px;
        background: #0160c0;
        vertical-align: middle;
        content: "";
      }
    }
  }
  /deep/.el-dialog__body {
    height: 30vh;
    padding: 16px;
    .content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      .name {
        width: 8.8vw;
        height: 26px;
        margin-bottom: 10px;
        text-align: center;
        line-height: 26px;
        background: #f3f7ff;
        border-radius: 2px;
        font-size: 12px;
        color: #606266;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        &.isactive {
            background: #0160C0;
            color: #fff;
        }
      }
      .empty {
          visibility: hidden;
      }
    }
  }
  /deep/.el-dialog__footer {
      padding: 10px 16px 16px;
  }
}
</style>